<template>
  <q-dialog v-model="visible">
    <q-card style="max-width: 90vw; max-height: calc(100vh - 2rem)">
      <q-card-section class="flex q-gutter-x-sm items-center">
        <div class="text-h6">动作列表</div>
        <q-space/>
      </q-card-section>
      <q-table
      class="sticky-header-table no-border-radius"
      style="min-height: 10rem; max-height: calc(100vh - 10rem);"
      :rows="actions" :columns="columns"
      virtual-scroll
      :rows-per-page-options="[0]"
      :virtual-scroll-sticky-size-start="48"
      hide-bottom
      row-key="id">
      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td v-bind:key="'priority'" :props="props">
            {{ props.row.priority }}
          </q-td>
          <q-td v-bind:key="'device'" :props="props">
            {{ props.row.device }}
          </q-td>
          <q-td v-bind:key="'actionGroup'" :props="props">
            {{ groupName[props.row.actionGroup] || props.row.actionGroup }}
          </q-td>
          <q-td v-bind:key="'type'" :props="props">
            {{ typeName[props.row.type] || props.row.type }}
          </q-td>
          <q-td v-bind:key="'content'" :props="props">
            <map-pose-td v-if="['lift-in','lift-out'].includes(props.row.type) || props.row.type.includes('load')" label="工位点"
                         :pose-id="props.row.data.poseID" map-name/>
            <map-pose-td v-else-if="props.row.type.includes('move')" label="点位名称" :pose-id="props.row.data" map-name/>
          </q-td>
        </q-tr>
      </template>
    </q-table>
    </q-card>
  </q-dialog>
</template>
<script setup>
import { inject, ref } from 'vue'
import { api } from 'boot/axios'
import { useAPIStore } from 'stores/api'
import MapPoseTd from 'components/actionPlan/MapPoseTd.vue'

const columns = [
  {
    name: 'priority',
    label: '优先度',
    field: 'priority',
    align: 'center'
  },
  {
    name: 'device',
    label: '执行设备',
    field: 'device',
    align: 'left'
  },
  {
    name: 'actionGroup',
    label: '分组',
    field: 'actionGroup',
    align: 'left'
  },
  {
    name: 'type',
    label: '类型',
    field: 'type',
    align: 'center'
  },
  {
    name: 'content',
    label: '指令内容',
    field: 'content',
    align: 'center'
  }
]
const visible = ref(false)
const actions = ref([])
const typeName = {}
const groupName = {}
inject('typeOptions').forEach(item => {
  typeName[item.value] = item.label
})
inject('groupOptions').forEach(item => {
  groupName[item.value] = item.label
})

defineExpose({ show })
function show (id) {
  visible.value = true
  api.get(useAPIStore().centerUrl + 'action/planID/' + id).then(rs => {
    actions.value = rs.data
  })
}
</script>

<style scoped>

</style>
